<template>
	<view class="new-list">
		<v-tabs v-model="currentNewsIndex"
		 :tabs="newsDisplayTypes"
		 activeColor="#000"
		 lineColor="#24cba9"
		 lineHeight="5rpx"
		 :lineScale="0.3"
		 fontSize="34rpx"
		  @change="changeTab"
		  ></v-tabs>
		  <view class="news-box" v-for="(item, idx) in newsList" :key="idx" @tap="tabNews" :data-id="item.id">
			  <image class="cover" :src="imageUrl(item.imageUrl)"></image>
			  <view class="news-info">
				  <view class="title">{{item.title}}</view>
				  <view class="meta">
					  <image src="/static/images/new-hits.png"></image>
					  <view>{{ item.hit }}</view>
					  <view>{{ formatTimeTwo(new Date(item.createTime), 'M月D日 h:m') }}</view>
				  </view>
			  </view>
		  </view>
	</view>
	
</template>

<script>
	import {getNewsTypes, fetchNewsList} from '../../api/news.js'
	import {imageUrl, formatTimeTwo} from '../../utils/util.js'
	
	export default {
		data() {
			return {
			currentNewsIndex: 0,
			newsDisplayTypes: [],
			newsTypes: [],
			newsList: [],
			page: 1,
			};
		},
		onLoad() {
			this._initNews();
		},
		onPullDownRefresh() {
		  this.setData({
		    page: 1,
		  }), this.initNewlist();
		},
		onReachBottom: function () {
		  if (!this.noMore) {
		    let page = this.page;
		    this.setData({
		      page: page+1
		    }), this.initNewlist();
		  }
		},
		methods: {
			formatTimeTwo,
			imageUrl,
			_initNews() {
					getNewsTypes().then(result=>{
							 let newsDisplayTypes = [];
							 result.data.forEach(item=>{
								 newsDisplayTypes.push(item.value)
							 })
							 let newsTypes = result.data
							 this.setData({newsDisplayTypes, newsTypes})
							 this.initNewlist();
					});
			},
			initNewlist() {
					  let type = this.newsTypes[this.currentNewsIndex].code
					  fetchNewsList({type, pageSize: 10, pageNo: this.page}).then(result=>{
						  let newsList = this.newsList
						  console.log(newsList)
						  newsList = newsList.concat(result.data.rows)
						  this.setData({newsList})
					  })
			},
			changeTab(index) {
			   this.setData({currentNewsIndex: index, page: 1, newsList: []})
			   this.initNewlist()
			},
		}
	}
</script>

<style lang="scss">
.new-list {
	.news-box {
		display: flex;
		flex-direction: row;
		padding: 20rpx;
		border-bottom: 2rpx solid #f0f0f0;
		.cover {
			width: 212rpx;
			height: 160rpx;
		}
		.news-info {
			flex: 1;
			margin-left: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			.title {
				font-size: 32rpx;
				font-weight: bold;
				text-overflow: -o-ellipsis-lastline;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 2;
				-webkit-box-orient: vertical;
			}
			.meta{
				display: flex;
				flex-direction: row;
				
				image {
					width: 24rpx;
					height: 24rpx;
					margin-right: 5rpx;
				}
				view {
					color: #9ca1a7;
					font-size: 24rpx;
					line-height: 24rpx;
					margin-right: 15rpx;
				}
			
			}
		}
	}
}
</style>
